<template>
  <el-drawer v-model="show" size="820px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
    <template #header>
      <div class="drawer-header">
        <span class="drawer-title">新增银行卡代扣商家</span>
        <el-icon @click="closeDialog" color="#909399" size="16" style="cursor: pointer">
          <Close />
        </el-icon>
      </div>
    </template>
    <div class="pane">
      <el-form ref="formRef" :model="form" :rules="formRules" :label-width="150">
        <div class="title">
          <div class="text">基本信息</div>
        </div>
        <el-row :gutter="10">
          <el-col :span="24">
              <el-form-item prop="payment_types" label="商家申请产品">
                <el-checkbox-group v-model="form.payment_types">
                    <el-checkbox  v-for="(item,index) in dict['payment_type_list']" :key="index" :label="item.value">{{ item.text }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="agent_partner_id" label="区域渠道">
              <el-select v-model="form.agent_partner_id" :disabled="partnerDisabled" filterable clearable>
                <el-option v-for="(item, index) in partnerList" :label="item.real_name" :value="item.id"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item prop="agent_partner_rate" label="渠道分成费率">
              <el-input v-model="form.agent_partner_rate" :disabled="true" placeholder="请输入渠道分成费率">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item prop="agent_service_id" label="服务商">
              <el-select v-model="form.agent_service_id" clearable filterable :disabled="true">
                <el-option v-for="(item, index) in serviceList" :label="item.real_name" :value="item.id"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item prop="agent_service_rate" label="服务商分成费率">
              <el-input v-model="form.agent_service_rate" :disabled="true" placeholder="请输入渠道分成费率">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item prop="company_name" label="营业执照公司全称">
              <el-input v-model="form.company_name" placeholder="请输入营业执照公司全称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="license_no" label="营业执照编码">
              <el-input v-model="form.license_no" placeholder="请输入营业执照编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="short_name" label="商户简称">
              <el-input v-model="form.short_name" placeholder="请输入商户简称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.payment_types.indexOf('1') > -1 || form.payment_types.indexOf('3') > -1">
            <el-form-item prop="bank_name" label="结算银行名称" >
              <el-input v-model="form.bank_name" placeholder="请输入结算银行名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.payment_types.indexOf('1') > -1 || form.payment_types.indexOf('3') > -1">
            <el-form-item prop="bank_account" label="结算银行账户" >
              <el-input v-model="form.bank_account" placeholder="请输入结算银行账户"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.payment_types.indexOf('3') > -1">
            <el-form-item prop="bank_area_id" label="开户行地区">
              <div style="display: flex; height: 100%; width: 100%">
                <div style="flex: 1; height: 100%">
                  <el-select v-model="form.bank_province_id" style="width: 100%" @change="bankProvinceChange" filterable clearable>
                    <el-option v-for="(item, index) in province_list" :label="item.region_name" :value="item.id"
                      :key="index"></el-option>
                  </el-select>
                </div>
                <div style="flex: 1; height: 100%; margin: 0 10px">
                  <el-select v-model="form.bank_city_id" style="width: 100%" @change="bankCityChange" filterable clearable>
                    <el-option v-for="(item, index) in bank_city_list" :label="item.region_name" :value="item.id"
                      :key="index"></el-option>
                  </el-select>
                </div>
                <div style="flex: 1; height: 100%">
                  <el-select v-model="form.bank_area_id" style="width: 100%" filterable clearable>
                    <el-option v-for="(item, index) in bank_area_list" :label="item.region_name" :value="item.id"
                      :key="index"></el-option>
                  </el-select>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.payment_types.indexOf('3') > -1">
            <el-form-item label="支行名称" prop="bank_branch_name">
              <el-input v-model="form.bank_branch_name" placeholder="请输入支行名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.payment_types.indexOf('1') > -1 || form.payment_types.indexOf('3') > -1">
            <el-form-item prop="bank_card_no" label="结算银行卡号" >
              <el-input v-model="form.bank_card_no" placeholder="请输入结算银行卡号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.payment_types.indexOf('2') > -1">
            <el-form-item label="经营类目(支付宝)" prop="alipay_category_ids" >
              <el-cascader v-model="form.alipay_category_ids" :options="categoryList" :props="cascaderProps" placeholder="请选择经营类目" style="width: 100%;" ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.payment_types.indexOf('2') > -1">
            <el-form-item label="企业支付宝账号" prop="alipay_account" >
              <el-input v-model="form.alipay_account" placeholder="请输入企业支付宝账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="legal_person_name" label="法人姓名">
              <el-input v-model="form.legal_person_name" placeholder="请输入法人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="legal_person_mobile" label="法人手机号">
              <el-input v-model="form.legal_person_mobile" placeholder="请输入法人手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="connect_name" label="联系人">
              <el-input v-model="form.connect_name" placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="connect_mobile" label="联系电话">
              <el-input v-model="form.connect_mobile" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="area_id" label="所在地区">
              <div style="display: flex; height: 100%; width: 100%">
                <div style="flex: 1; height: 100%">
                  <el-select v-model="form.province_id" style="width: 100%" @change="provinceChange" filterable clearable>
                    <el-option v-for="(item, index) in province_list" :label="item.region_name" :value="item.id"
                      :key="index"></el-option>
                  </el-select>
                </div>
                <div style="flex: 1; height: 100%; margin: 0 10px">
                  <el-select v-model="form.city_id" style="width: 100%" @change="cityChange" filterable clearable>
                    <el-option v-for="(item, index) in city_list" :label="item.region_name" :value="item.id"
                      :key="index"></el-option>
                  </el-select>
                </div>
                <div style="flex: 1; height: 100%">
                  <el-select v-model="form.area_id" style="width: 100%" @change="areaChange" filterable clearable>
                    <el-option v-for="(item, index) in area_list" :label="item.region_name" :value="item.id"
                      :key="index"></el-option>
                  </el-select>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="address" label="详细地址">
              <el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="service_mobile" label="客服电话">
              <el-input v-model="form.service_mobile" placeholder="请输入客服电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">
            <div class="text">商家后台管理员账号</div>
          </div>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="姓名:" prop="login_real_name">
                <el-input v-model="form.login_real_name" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="登录手机号:" prop="login_mobile">
                <el-input v-model="form.login_mobile" placeholder="请输入登录手机号"></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="login_password">
                <el-input type="password" v-model="form.login_password" placeholder="请输入密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        <div class="title">
          <div class="text">证件照片</div>
        </div>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="营业执照" prop="license_image">

              <el-upload v-model:file-list="license_image_list" :action="baseUrl + 'v1/tools/file/upload'"
                list-type="picture-card" accept=".png,.gif,.jpeg,.jpg" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'license_image')
}" :on-success="(res) => {
  handleImgSuccess(res, 'license_image');
}">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="lega_card_front" label="法人身份证正面照片">
              <el-upload v-model:file-list="lega_card_front_list" :action="baseUrl + 'v1/tools/file/upload'"
                list-type="picture-card" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'lega_card_front')
}" :on-success="(res) => {
    handleImgSuccess(res, 'lega_card_front');
  }
  ">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="lega_card_back" label="法人身份证反面照片">
              <el-upload v-model:file-list="lega_card_back_list" :action="baseUrl + 'v1/tools/file/upload'"
                list-type="picture-card" accept=".png,.gif,.jpeg,.jpg" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'lega_card_back')
}" :on-success="(res) => {
    handleImgSuccess(res, 'lega_card_back');
  }
  ">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item prop="website_auth_image" label="H5网站授权函">
                <el-upload
                  v-model:file-list="website_auth_image_list"
                  :action="baseUrl + 'v1/tools/file/upload'"
                  list-type="picture-card"
                  accept=".png,.gif,.jpeg,.jpg"
                  :headers="{
                    'x-token': token,
                  }"
                  :data="{
                    module: 'seller_file',
                  }"
                  :limit="1"
                  :with-credentials="true"
                  :on-remove="(res) => {
                      handleImgRemove(res, 'website_auth_image')
                  }"
                  :on-success="
                    (res) => {
                      handleImgSuccess(res, 'website_auth_image');
                    }
                  "
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
              </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.payment_types.indexOf('3') > -1">
              <el-form-item prop="settle_bank_image" label="商家结算银行卡照片">
                <el-upload
                  v-model:file-list="settle_bank_image_list"
                  :action="baseUrl + 'v1/tools/file/upload'"
                  list-type="picture-card"
                  accept=".png,.gif,.jpeg,.jpg"
                  :headers="{
                    'x-token': token,
                  }"
                  :data="{
                    module: 'seller_file',
                  }"
                  :limit="1"
                  :with-credentials="true"
                  :on-remove="(res) => {
                      handleImgRemove(res, 'settle_bank_image')
                  }"
                  :on-success="
                    (res) => {
                      handleImgSuccess(res, 'settle_bank_image');
                    }
                  "
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
          <el-col :span="24">
            <el-form-item prop="special_qualification_images" label="特殊行业资质照">
                <el-upload
                  v-model:file-list="special_qualification_images_list"
                  :action="baseUrl + 'v1/tools/file/upload'"
                  list-type="picture-card"
                  accept=".png,.gif,.jpeg,.jpg"
                  :headers="{
                    'x-token': token,
                  }"
                  :data="{
                    module: 'seller_file',
                  }"
                  :limit="9"
                  :with-credentials="true"
                  :on-remove="(res) => {
                      handleImgRemove(res, 'special_qualification_images')
                  }"
                  :on-success="
                    (res) => {
                      handleImgSuccess(res, 'special_qualification_images');
                    }
                  "
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">
          <div class="text">门店照片</div>
        </div>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item prop="door_head_image" label="门头照片">
              <el-upload v-model:file-list="door_head_image_list" :action="baseUrl + 'v1/tools/file/upload'"
                list-type="picture-card" accept=".png,.gif,.jpeg,.jpg" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'door_head_image')
}" :on-success="(res) => {
    handleImgSuccess(res, 'door_head_image');
  }
  ">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="foreground_image" label="前台照片">
              <el-upload v-model:file-list="foreground_image_list" :action="baseUrl + 'v1/tools/file/upload'"
                list-type="picture-card" accept=".png,.gif,.jpeg,.jpg" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'foreground_image')
}" :on-success="(res) => {
    handleImgSuccess(res, 'foreground_image');
  }
  ">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="storefront_images" label="店内照片">
              <el-upload v-model:file-list="storefront_images_list" :action="baseUrl + 'v1/tools/file/upload'"
                list-type="picture-card" accept=".png,.gif,.jpeg,.jpg" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="9" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'storefront_images')
}" :on-success="(res) => {
    handleImgSuccess(res, 'storefront_images');
  }
  ">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title" style="justify-content: flex-start">
          <div class="text">协议照片</div>
          <div class="desc">(支持Word/pdf/excel等格式)</div>
        </div>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item prop="cooperation_file" label="商户申请表">
              <el-upload v-model:file-list="cooperation_file_list" :action="baseUrl + 'v1/tools/file/upload'"
                accept=".xls,.xlsx,.doc,.docx,.pdf,.png,.gif,.jpeg,.jpg" list-type="text" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'cooperation_file')
}" :on-success="(res) => {
    handleImgSuccess(res, 'cooperation_file');
  }
  ">
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="apply_file" label="商户合作协议">
              <el-upload v-model:file-list="apply_file_list" :action="baseUrl + 'v1/tools/file/upload'"
                accept=".xls,.xlsx,.doc,.docx,.pdf,.png,.gif,.jpeg,.jpg" list-type="text" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'apply_file')
}" :on-success="(res) => {
    handleImgSuccess(res, 'apply_file');
  }
  ">
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="job_number_file" label="商户工号明细表">
              <el-upload v-model:file-list="job_number_file_list" :action="baseUrl + 'v1/tools/file/upload'"
                accept=".xls,.xlsx,.doc,.docx,.pdf,.png,.gif,.jpeg,.jpg" list-type="text" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'job_number_file')
}" :on-success="(res) => {
    handleImgSuccess(res, 'job_number_file');
  }
  ">
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="wyf_apply_file" label="无压赋商户申请表">
              <el-upload v-model:file-list="wyf_apply_file_list" :action="baseUrl + 'v1/tools/file/upload'"
                accept=".xls,.xlsx,.doc,.docx,.pdf,.png,.gif,.jpeg,.jpg" list-type="text" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'wyf_apply_file')
}" :on-success="(res) => {
    handleImgSuccess(res, 'wyf_apply_file');
  }">
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="wyf_cooperation_file" label="无压赋商户合作协议">
              <el-upload v-model:file-list="wyf_cooperation_file_list" :action="baseUrl + 'v1/tools/file/upload'"
                accept=".xls,.xlsx,.doc,.docx,.pdf,.png,.gif,.jpeg,.jpg" list-type="text" :headers="{
                  'x-token': token,
                }" :data="{
  module: 'seller_file',
}" :limit="1" :with-credentials="true" :on-remove="(res) => {
  handleImgRemove(res, 'wyf_cooperation_file')
}" :on-success="(res) => {
    handleImgSuccess(res, 'wyf_cooperation_file');
  }">
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div v-if="state == 'audit'">
        <el-button @click="audit(formRef, 2)">拒绝</el-button>
        <el-button type="primary" @click="audit(formRef, 1)">通过</el-button>
      </div>
      <div v-else-if="state == 'add' || state == 'edit'">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="save(formRef)">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch, nextTick, computed } from "vue";
import type { FormInstance, FormRules, CascaderProps } from "element-plus";

import cookies from "libs/cookies";
import { ElMessageBox, ElMessage } from 'element-plus'

import { Plus, Close } from "@element-plus/icons-vue";

import { getAgentPartnerList, getAgentServiceList, getCategoryList } from "services/common";

import { getRegion } from "services/system";

import { setBankShop, getBankDetail } from "services/shop"

import systemStore from "@/store/modules/system";

const props = defineProps<{
  drawerShow: boolean,
  id?: string,
  state: string
}>();

const emit = defineEmits(['close', 'refresh'])

const cascaderProps:CascaderProps = {
    label:'category_name',
    value:'id'
}

const baseUrl = import.meta.env.GZG_BASE_URL;

const partnerDisabled = ref(true)

const token = cookies.get("token");

const formRef = ref<FormInstance>();

const form = reactive({
  id: '', //编辑id
  login_real_name:'',
  login_mobile:'',
  login_password:'',
  payment_types:<any>['1','2'],
  alipay_category_ids: [], // 支付宝经营类目id
  alipay_account: '', //企业支付宝账号
  company_name: "", //公司名称
  license_no: "", //营业执照编号
  short_name: "", //商户简称
  legal_person_name: "", //法人姓名
  legal_person_mobile: "", //法人手机号
  bank_name:'',
  bank_open_address:'',
  bank_branch_name: '',
  bank_province_id:'',
  bank_city_id:'',
  bank_area_id:'',
  bank_account: "", //支付宝姓名
  bank_card_no: "", //支付宝账号
  connect_name: "", //联系人
  connect_mobile: "", //联系人手机号
  province_id: "", // 省id
  city_id: "", // 市id
  area_id: "", //区域id
  address: "", //详细地址
  service_mobile: "", //客服电话
  agent_partner_id: "", //渠道商id
  agent_partner_rate: "", //渠道分成费率
  agent_service_id: "", //服务商id
  agent_service_rate: "", //服务商分成费率
  license_image: "", //营业执照图
  lega_card_front: "", //法人身份证正面图
  lega_card_back: "", //法人身份证反面图
  door_head_image: "", //门头照片
  foreground_image: "", //前台照片
  settle_bank_image:"",
  website_auth_image: "", // h5网站授权函
  special_qualification_images:[], // 特殊行业资质图片组
  storefront_images: <any>[], //店内照片组
  cooperation_file: {
    name: '',
    url: ''
  }, //商户合作协议
  apply_file: {
    name: '',
    url: ''
  },
  job_number_file: {
    name: '',
    url: ''
  },
  wyf_apply_file: {
    name: '',
    url: ''
  },
  wyf_cooperation_file: {
    name: '',
    url: ''
  }
});

const checkWebsiteAuthImage = (rule:any, value:any, callback:any) => {
    if (form.payment_types.indexOf('2') > -1) {
      if (value === '') {
        callback(new Error('请上传H5网站授权函'))
      } else {
        callback()
      }
    } else {
      callback()
    }
}

const formRules = reactive<FormRules>({
  company_name:[{required:true,message:'请输入营业执照公司全称'}],
  short_name:[{required:true,message:'请输入商户简称'}],
  license_no:[{required:true,message:'请输入营业执照编码'}],
  login_real_name:[{required:true,message:'请输入登录名'}],
  login_mobile:[{required:true,message:'请输入登录手机号'}],
  login_password:[{required:true,message:'请输入登录密码'}],
  alipay_category_ids:[{required:true,message:'请选择经营类目', trigger:'change'}],
  alipay_account:[{required:true,message:'请输入企业支付宝账号'}],
  website_auth_image:[{ validator: checkWebsiteAuthImage}],
  connect_name:[{required:true,message:'请输入联系人'}],
  connect_mobile:[{required:true,message:'请输入联系电话'}],
  area_id:[{required:true,message:'请选择所在地区',trigger:'change'}],
  address:[{required:true,message:'请输入详细地址'}],
  license_image:[{required:true,message:'请上传营业执照', trigger:'change'}],
  lega_card_front:[{required:true,message:'请上传法人身份证正面照片', trigger:'change'}],
  lega_card_back:[{required:true,message:'请上传法人身份证反面照片', trigger:'change'}],
  door_head_image:[{required:true,message:'请上传门头照片', trigger:'change'}],
  foreground_image:[{required:true,message:'请上传前台照片', trigger:'change'}],
  storefront_images:[{required:true,message:'请上传店内照片', trigger:'change'}],
  cooperation_file:[{required:true,message:'请上传商户申请表', trigger:'change'}],
  apply_file:[{required:true,message:'请上传商户合作协议', trigger:'change'}],
  job_number_file:[{required:true,message:'请上传商户工号明细表', trigger:'change'}],
  wyf_apply_file:[{required:true,message:'请上传无压赋商户申请表', trigger:'change'}],
  wyf_cooperation_file:[{required:true,message:'请上传无压赋商户合作协议', trigger:'change'}],
});

const show = ref(false)

const partnerList = ref<any>([]);
const serviceList = ref<any>([]);

const province_list = ref<any>([]);
const city_list = ref<any>([]);
const area_list = ref<any>([]);

const bank_city_list = ref<any>([]);
const bank_area_list = ref<any>([]);

const license_image_list = ref<any>([]);
const lega_card_front_list = ref<any>([]);
const lega_card_back_list = ref<any>([]);
const door_head_image_list = ref<any>([]);
const foreground_image_list = ref<any>([]);
const storefront_images_list = ref<any>([]);
const cooperation_file_list = ref<any>([]);
const apply_file_list = ref<any>([])
const website_auth_image_list = ref<any>([])
const special_qualification_images_list = ref<any>([])
const job_number_file_list = ref<any>([])
const wyf_apply_file_list = ref<any>([])
const wyf_cooperation_file_list = ref<any>([])
const settle_bank_image_list = ref<any>([])

const categoryList = ref(<any>[])

const desensitize = (val:string) => {
  if (val.length == 1) {
    return val
  } else if (val.length == 2) {
    return `*${val.substring(val.length - 1)}`
  } else if (val.length > 2) {
    return `**${val.substring(val.length - 1)}`

  }

  return val
}

const initData = () => {
  getRegion({ parent_id: 0 }).then((res) => {
    province_list.value = res.items;
  });
  if (userInfo.value.agent_type == '1') {
    partnerList.value = [{
      real_name:userInfo.value.real_name,
      id:userInfo.value.id
    }]
  }
  
  getAgentServiceList().then((res) => {
    res.items.forEach((item:any) => {
        item.real_name = desensitize(item.real_name)
    })
    serviceList.value = res.items;
  });

  getCategoryList().then(res => {
      categoryList.value = res.items
  })
};

const handleImgSuccess = (data: any, type: any) => {
  if (data.code == 0) {
    if(type == 'storefront_images' ||  type == 'special_qualification_images') {
          form[type].push(data.data.file[0].absolute_path);
  
      } else if (type == 'cooperation_file' || type == 'apply_file' || type == 'job_number_file' || type == 'wyf_apply_file' || type == 'wyf_cooperation_file') {
      form[type] = {
        name: data.data.file[0].name,
        url: data.data.file[0].absolute_path
      }
    } else {
      form[type] = data.data.file[0].absolute_path;

    }
  } else {
    if (type == 'cooperation_file') {
      cooperation_file_list.value = []
    }

    if (type == 'apply_file') {
      apply_file_list.value = []
    }

    if (type == 'job_number_file') {
      job_number_file_list.value = []
    }

    if (type == 'wyf_apply_file') {
      wyf_apply_file_list.value = []
    }

    if (type == 'wyf_cooperation_file') {
      wyf_cooperation_file_list.value = []
    }
    ElMessage.error(data.msg)
  }
};

const handleImgRemove = (file: any, type: any) => {
  console.log(file, type)
  if (type == 'storefront_images') {
    let i = 0
    form['storefront_images'].forEach((url: any, index: number) => {
      if (url == file.url) {
        i = index
      }
    })

    form['storefront_images'].splice(i, 1)
  } else if (type == 'cooperation_file' || type == 'apply_file' || type == 'job_number_file' || type == 'wyf_apply_file' || type == 'wyf_cooperation_file') {
    form[type] = {
      name: '',
      url: ''
    }
  } else {
    form[type] = ''
  }
}


const bankProvinceChange = (val: any) => {
  if (val) {
    getRegion({ parent_id: val }).then((res) => {
      bank_city_list.value = res.items;
    });
  }
};

const bankCityChange = (val: any) => {
  if (val) {
    getRegion({ parent_id: val }).then((res) => {
      bank_area_list.value = res.items;
    });
  }
};

const provinceChange = (val: any) => {
  if (val) {
    getRegion({ parent_id: val }).then((res) => {
      city_list.value = res.items;
    });
  }
};

const cityChange = (val: any) => {
  console.log(val);
  if (val) {
    getRegion({ parent_id: val }).then((res) => {
      area_list.value = res.items;
    });
  }
};

const areaChange = (val: any) => {
  if (val) {
    if (userInfo.value.agent_type == "2") {
      getAgentPartnerList({ area_id: val }).then((res) => {
        if (res.items.length > 0) {
          res.items.forEach((item:any) => {
            item.real_name = desensitize(item.real_name)
          })
        }
        partnerList.value = res.items;
        if (res.items.length == 1 ) {
          form.agent_partner_id = res.items[0].id
        }

        if (res.items.length > 1) {
          partnerDisabled.value = false
        }
      });
    }
  }
};

const closeDialog = () => {
  emit('close')
}

const save = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      setBankShop(form).then(res => {
        ElMessage.success('申请成功')
        emit('refresh')
      })
    }
  })
}


const getDetail = (val: any) => {
  getBankDetail({
    id: val
  }).then(res => {
    console.log(res)
    getRegion({ parent_id: res.province_id }).then((res) => {
      city_list.value = res.items;
    });

    getRegion({ parent_id: res.city_id }).then((res) => {
      area_list.value = res.items;
    });

    getAgentPartnerList({ area_id: res.area_id }).then((res) => {
      res.items.forEach((item:any) => {
        item.real_name = desensitize(item.real_name)
      })
      partnerList.value = res.items;
    });

    getAgentServiceList().then((res) => {
      res.items.forEach((item:any) => {
        item.real_name = desensitize(item.real_name)
      })
      serviceList.value = res.items;
    });
    for(let key in form){
        form[key] = res[key]
    }
    // form.id = res.id //编辑id
    // form.company_name = res.company_name //公司名称
    // form.license_no = res.license_no //营业执照编号
    // form.short_name = res.short_name //商户简称
    // form.legal_person_name = res.legal_person_name //法人姓名
    // form.legal_person_mobile = res.legal_person_mobile //法人手机号
    // form.bank_name = res.bank_name
    // form.bank_account = res.bank_account //支付宝姓名
    // form.bank_card_no = res.bank_card_no //支付宝账号
    // form.connect_name = res.connect_name //联系人
    // form.connect_mobile = res.connect_mobile //联系人手机号
    // form.province_id = res.province_id // 省id
    // form.city_id = res.city_id // 市id
    // form.area_id = res.area_id //区域id
    // form.address = res.address //详细地址
    // form.service_mobile = res.service_mobile //客服电话
    // form.agent_partner_id = res.agent_partner_id //渠道商id
    // form.agent_partner_rate = res.agent_partner_rate //渠道分成费率
    // form.agent_service_id = res.agent_service_id //服务商id
    // form.agent_service_rate = res.agent_service_rate, //服务商分成费率
    // form.license_image = res.license_image, //营业执照图
    // form.lega_card_front = res.lega_card_front, //法人身份证正面图
    // form.lega_card_back = res.lega_card_back //法人身份证反面图
    // form.door_head_image = res.door_head_image //门头照片
    // form.foreground_image = res.foreground_image //前台照片
    // form.storefront_images = res.storefront_images //店内照片组
    // form.cooperation_file = res.cooperation_file
    // form.apply_file = res.apply_file
    // form.job_number_file = res.job_number_file
    // form.wyf_apply_file = res.wyf_apply_file
    // form.wyf_cooperation_file = res.wyf_cooperation_file
    // form.payment_types = res.payment_types
    // form.alipay_category_ids = res.alipay_category_ids
    // form.alipay_account = res.alipay_account

    license_image_list.value = [{ url: res.license_image }]
    lega_card_front_list.value = [{ url: res.lega_card_front }]
    lega_card_back_list.value = [{ url: res.lega_card_back }]
    door_head_image_list.value = [{ url: res.door_head_image }]
    foreground_image_list.value = [{ url: res.foreground_image }]
    settle_bank_image_list.value = [{ url: res.settle_bank_image }]
    special_qualification_images_list.value = res.special_qualification_images.map((url:any) => {
      return {url:url}
    })
    if (res.website_auth_image) {
      website_auth_image_list.value = [{url:res.website_auth_image}]
    }
    storefront_images_list.value = res.storefront_images.map((url: any) => {
      return { url: url }
    })
    cooperation_file_list.value = [{ url: res.cooperation_file.url, name: res.cooperation_file.name }]
    apply_file_list.value = [{ url: res.apply_file.url, name: res.cooperation_file.name }]
    job_number_file_list.value = [{ url: res.job_number_file.url, name: res.job_number_file.name }]
    wyf_apply_file_list.value = [{ url: res.wyf_apply_file.url, name: res.wyf_apply_file.name }]
    wyf_cooperation_file_list.value = [{ url: res.wyf_cooperation_file.url, name: res.wyf_cooperation_file.name }]

  })
}

const userInfo = computed(() => {

  return systemStore().userInfo;
});

const dict = computed(() => {
  return systemStore().dict
})


watch(() => props.drawerShow, (newVal: any) => {
  console.log(newVal)
  if (newVal == true) {
    if (props.state == 'add') {
        formRef.value?.resetFields()

        license_image_list.value = []
        lega_card_front_list.value = []
        lega_card_back_list.value = []
        door_head_image_list.value = []
        foreground_image_list.value = []
        storefront_images_list.value = []
        cooperation_file_list.value = []
        apply_file_list.value = []
        job_number_file_list.value = []
        wyf_apply_file_list.value = []
        wyf_cooperation_file_list.value = []
        website_auth_image_list.value = []
        special_qualification_images_list.value = []
        settle_bank_image_list.value = []
    }
  }
  show.value = newVal
}, {
  immediate: true
})

watch(() => props.id, (newVal: any) => {
  console.log(newVal,'fff');

  if (newVal) {
    getDetail(newVal)
  } else {
    form.id = '' //编辑id
    form.payment_types = ['1','2']
    form.alipay_category_ids = [], // 支付宝经营类目id
    form.alipay_account = '' //企业支付宝账号
    form.company_name = '' //公司名称
    form.license_no = '' //营业执照编号
    form.short_name = '' //商户简称
    form.legal_person_name = '' //法人姓名
    form.legal_person_mobile = '' //法人手机号
    form.bank_name = '' // 
    form.bank_branch_name = ''
    form.bank_open_address = ''
    form.bank_province_id = ''
    form.bank_city_id = ''
    form.bank_area_id = ''
    form.bank_account = '' //支付宝姓名
    form.bank_card_no = '' //支付宝账号
    form.connect_name = '' //联系人
    form.connect_mobile = '' //联系人手机号
    form.province_id = '' // 省id
    form.city_id = '' // 市id
    form.area_id = '' //区域id
    form.address = '' //详细地址
    form.service_mobile = '' //客服电话
    form.agent_partner_id = '' //渠道商id
    form.agent_partner_rate = '' //渠道分成费率
    form.agent_service_id = '' //服务商id
    form.agent_service_rate = '' //服务商分成费率
    form.license_image = '', //营业执照图
    form.lega_card_front = '', //法人身份证正面图
    form.lega_card_back = '' //法人身份证反面图
    form.door_head_image = '' //门头照片
    form.settle_bank_image = ''
    form.foreground_image = '' //前台照片
    form.storefront_images = []//店内照片组
    form.website_auth_image = "" // h5网站授权函
    form.special_qualification_images = [] // 特殊行业资质图片组
    form.cooperation_file = {
      url: '',
      name: ''
    }

    form.apply_file = {
      url: '',
      name: ''
    }

    form.job_number_file = {
      url: '',
      name: ''
    }

    form.wyf_apply_file = {
      url: '',
      name: ''
    }

    form.wyf_cooperation_file = {
      url: '',
      name: ''
    }

    license_image_list.value = []
    lega_card_front_list.value = []
    lega_card_back_list.value = []
    door_head_image_list.value = []
    foreground_image_list.value = []
    storefront_images_list.value = []
    cooperation_file_list.value = []
    apply_file_list.value = []
    job_number_file_list.value = []
    wyf_apply_file_list.value = []
    wyf_cooperation_file_list.value = []
    settle_bank_image_list.value = []

    if (dict.value.default_rate_data.open_status == 1) {
      if (userInfo.value.agent_type == '1') {
        form.agent_partner_id = userInfo.value.id
        form.agent_partner_rate = dict.value.default_rate_data.agent_rate
        partnerList.value = [{
          real_name:userInfo.value.real_name,
          id:userInfo.value.id
        }]
      } else if (userInfo.value.agent_type == '2') {
        form.agent_partner_rate = dict.value.default_rate_data.agent_rate
        form.agent_service_id = userInfo.value.id
        form.agent_service_rate = dict.value.default_rate_data.service_rate
      }
    } else {
      if (userInfo.value.agent_type == '1') {
        form.agent_partner_id = userInfo.value.id
        form.agent_partner_rate = '0'
        partnerList.value = [{
          real_name:userInfo.value.real_name,
          id:userInfo.value.id
        }]
      } else if (userInfo.value.agent_type == '2') {
        form.agent_partner_rate ='0'
        form.agent_service_id = userInfo.value.id
        form.agent_service_rate = '0'
      }
    }
    
  }
}, {
  immediate:true
})

onMounted(() => {
  initData();
});
</script>
